<template>
  <article class="page mine-page">
    <div class="header">
      <div @click="tools.back()" class="back"><span class="arrow"></span></div>
      <div class="head-bd">
        积分明细汇总
      </div>
      <div class="message"><div class="head-btn-text"></div></div>
    </div>

    <section class="frame-content-sub no-bg">
      <supermarketHead></supermarketHead>
      <section class="block score-bd">

        <section class="date-wraper">
          <div class="month-box">
            <i class="pre-icon" @click="changeMonth('pre')"></i>
            <h1>{{year}}年{{month + 1}}月</h1>
            <i class="next-icon" @click="changeMonth('next')"></i>
          </div>
          <div v-if="myMonthScore" class="score-box">
            总计：<span>{{myMonthScore}}</span>分
          </div>
        </section>
        <fetchData v-if="isLoading" :loading="isLoading" :data="todayData"></fetchData>
        <div class="item" v-if="todayData.length>0" v-for="item in todayData">
          <div class="cont">
            <h1 class="title">{{item.name}}</h1>
            <div class="time">{{getTime (item.createTime)}}</div>
          </div>
          <div class="tip">+{{item.score}}分/次</div>
        </div>
        <div class="text-center no-data" v-if=" !isLoading && todayData.length===0">
          <img src="../../../../static/images/no_data.png" alt="">
          <p>暂无数据</p>
        </div>
      </section>

    </section>


  </article>
</template>

<script>
  import moment from 'moment'
  import tools from '@/utils/tools'
  import supermarketHead from '@/components/dangjian/mall/supermarketHead.vue'

  export default {
    name: 'personalcenter',
    components: {supermarketHead},
    data () {
      return {
        fn: tools,
        myMonthScore:0,
        isLoading: true,
        userInfo: {},
        sysFile: {},
        todayData: {},
        myIntegrals: {},
        year: new Date().getFullYear(),
        month: new Date().getMonth(),
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      this.myIntegral()
      this.dayDetailList()
    },
    methods: {
      changeMonth(type) {
        this.todayData = []
        this.isLoading = true
        if (type === 'pre') {
          this.year = this.month - 1 === -1 ? this.year - 1 : this.year;
          this.month = this.month - 1 === -1 ? 11 : this.month - 1;
        } else {
          this.year = this.month + 1 === 12 ? this.year + 1 : this.year;
          this.month = this.month + 1 === 12 ? 0 : this.month + 1;
        }
        console.log('年月：', this.year + '-' + (this.month + 1));
        this.dayDetailList()
      },
      percent (data) {
        let dayMaxScore = data.dayMaxScore
        if (data.dayMaxScore === 0) {
          dayMaxScore = data.dayMaxScore + 10
        }
        return data.hasScore / dayMaxScore * 100 + '%'
      },
      completeText (data) {

      },
      go (path) {
        this.$router.push({path: path})
      },
      getTimeDay (createTime) {
        if (!createTime) {
          return ''
        }
        return moment(createTime).format('MM月DD日')
      },
      myIntegral () {
        let data = {
          userId: this.userInfo.id
        }
        this.fetchService.myIntegral(data.userId).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.myIntegrals = res.data
        })
      },
      dayDetailList () {
        this.myMonthScore = 0
        this.todayData = []
        this.isLoading = true
        let params = {
          businessId: '',
          createTime: '',
          day: '',
          month: this.month+1<10? '0'+(this.month+1) : ''+(this.month+1),
          userId: this.userInfo.id,
          year: ''+this.year
        }
        this.fetchService.detailList(params).then(res => {
          this.isLoading = false
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.todayData = res.data
          this.todayData.forEach(item=>{
            this.myMonthScore += item.score
          })
        })
      },
      getTime (createTime) {
        return moment(createTime).format('YYYY年MM月DD日 HH:mm:ss')
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .mine-page{
    /*background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png") $bg-color no-repeat center #{pxToRem($head-height)};
    background-size: 100% auto;*/
    padding:0;
    .header {
      justify-content: space-between;
      margin-bottom: pxToRem(0px);
      position: relative;
    }
  }

  .score-hd {
    height:242px;
    text-align: center;
    background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png") $theme-color no-repeat center;
    background-size: 100% auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .score-head {
        width: 118px;
        height: 118px;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #EA7676;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .score-text {
      margin-right: 50px;
      text-align: left;

      .score-tip {
        .score-tip-text {
          vertical-align: super;
          color: #ffffff;

        }
      }

    }

    .score-play {
      width: 171px;
      height: 46px;
      line-height: 46px;
      background: #E20001;
      border: 1px solid #FFFFFF;
      border-radius: 10px;
      color: #ffffff;
      opacity: 0;
    }

    .score {
      font-size:56px;
      line-height:1.2em;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-right: 10px;
    }

    .tip {
      font-size:12PX;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }


  .score-bd {
    padding:10px 30px;
    .date-wraper {
      /*background: #fff;
      border-radius: 20px;
      box-shadow:0px 2px 16px 0px rgba(32,21,18,0.41);
      padding: 0 34px;*/
      border-bottom: 1px solid #E5E5E5;
      box-sizing: border-box;
      .month-box {
        display: flex;
        height: 95px;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #E5E5E5;
        i {
          display: inline-block;
          width: pxToRem(21px);
          height: pxToRem(35px);
          &.pre-icon {
            background: url("../../../../static/images/dangjian/mall/arrow-left.png") no-repeat center;
            background-size: auto 100%;
          }
          &.next-icon {
            background: url("../../../../static/images/dangjian/mall/arrow-right.png") no-repeat center;
            background-size: auto 100%;
          }
        }
      }
      .score-box {
        width: 100%;
        height: 148px;
        text-align: center;
        line-height: 148px;
        span {
          color: #E20002;
          font-size: 56px;
          font-weight: bold;
        }
      }
    }
    .item {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:37px 0;
      border-bottom:1px solid $border-color;
      &:last-child {
        border:none;
      }
      .cont {
        width: 75%;
        .title {
          font-size: 16PX;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }

        .time {
          font-size: $tipFontSize;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
      .tip {
        font-size: 16PX;
        color: #E20002;
      }
    }
  }
  .mine-page >>> .swiper-pagination-bullet-active {
    background: #EC850C;
  }
</style>
